<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
          ref="waitForm"
          :model="waitForm"
          :rules="rules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="18">
              <el-form-item
                label="节点名称"
                prop="name"
              >
                <el-input v-model="waitForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="等待方式"
                prop="waitType"
              >
                <el-radio-group
                  v-model="waitForm.waitType"
                  size="medium"
                >
                  <el-radio-button label="1">按小时</el-radio-button>
                  <el-radio-button label="2">指定时间</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="drawer__content_rule clearfix">
            <el-row>
              <el-col :span="24">
                <span class="el-form-item__label">等待时间</span>

                <el-form-item
                  v-show="waitForm.waitType === '1'"
                  prop="time"
                >
                  <el-time-picker
                    v-model="waitForm.time"
                    value-format="HH:mm"
                    format="HH:mm"
                    arrow-control
                  >
                  </el-time-picker>
                </el-form-item>
                <el-form-item
                  v-show="waitForm.waitType !== '1'"
                  prop="datetime"
                >
                  <el-date-picker
                    v-model="waitForm.datetime"
                    value-format="yyyy-MM-dd:HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <div class="demo-drawer__footer">
          <div class="demo-drawer__footer">
            <el-row
              type="flex"
              justify="center"
            >
              <el-col :span="4">
                <el-button @click="cancel">取 消</el-button>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="primary"
                  @click="save"
                >确 定</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
   props: {
    formSetting: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    node: {
      type: Object,
      default: () => {
        return {};
      }
    },
    jsPlumb: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
    watch: {
    visible(val) {
      if (val) {
        this.nodeInit()
      }
    }
  },
  data() {
    var validateTime = (rule, value, callback) => {
      if (value === "" && this.waitForm.waitType === "1") {
        callback(new Error("请选择等待时间"));
      }
      callback();
    };
    var validateDate = (rule, value, callback) => {
      if (value === "" && this.waitForm.waitType !== "1") {
        callback(new Error("请选择等待日期"));
      }
      callback();
    };
    return {
      waitForm: {
        name: "", // 节点名称
        waitType: "1", // 等待方式
        time: "", // 按小时
        datetime: "" // 指定时间
      },
      rules: {
        name: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
        time: [{ validator: validateTime, trigger: "change" }],
        datetime: [{ validator: validateDate, trigger: "change" }]
      }
    };
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的node的ID进行业务信息获取
     * @param data
     * @param node
     */
    async nodeInit() {
      const { id, name } = this.node;
      const initForm = {
        name, // 节点名称
        waitType: "1",
        time: "", // 按小时
        datetime: "" // 指定时间
      };
      this.waitForm = { ...initForm, ...this.formSetting[id] };
    },
    validateForm() {
      const { nodeList } = this.data;
      const { id } = this.node;
      const { name } = this.waitForm;
      const nameArr = nodeList
        .filter(ele => ele.id !== id)
        .map(ele => ele["name"]);
      if (nameArr.includes(name)) {
        return { status: "error", message: "节点名称重复" };
      }
      return { status: "ok", message: "ok" };
    },
    save() {
      this.$refs.waitForm.validate(async valid => {
        if (valid) {
          const { status, message } = this.validateForm();
          if (status === "error") {
            return this.$message.error(message);
          }
          const { id } = this.node;
          const { name } = this.waitForm;
          this.$set(this.formSetting, id, this.waitForm);
          this.data.nodeList.filter(node => {
            if (node.id === id) {
              node.name = name;
              this.$emit("repaintEverything");
              this.cancel()
            }
          });
        } else {
          this.$message.error("表单校验失败");
          return false;
        }
      });
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../styles/valide-required.scss";

.monthGroup {
  .el-checkbox {
    width: 50px;
  }
}
::v-deep {
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
